<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        将所有段落设置为红色（字体）

        元素选择器
            作用：根据标签名来选择指定的元素
            语法：标签名
            列子：p{} h1{} h2{}
     -->
     <style>
            /* p{
                color: red;
            }
            h1{
                color: green;
            } */

            /* 
                id选择器
                    作用，根据元素的id属性值选中一个元素
                    语法：#id属性值{}
                    列子：#box{} #red{}
                    id最好不要重复
            */
            #abc{
                color: red;
            }
            .blue{
                color: blue;
            }
            .size{
                font-size: 50px;
            }
            /* 
                class是一个标签的属性，它和id类似，不同的是class可以重复使用
                    可以通过class属性来为元素分组
                    可以同时为一个元素指定多个class
                类选择器
                    作用，根据元素的class属性值选中一组元素
                    语法：.class属性值

            */

            /* 
                通配选择器
                    作用，选中页面中的所有元素
                    语法：*
            */
            *{
                color: red;
            }
     </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>一天一天</p>
    <p id="abc">哈哈哈哈</p>
    <p id="abc">第二他</p>
    <!-- 
        这样隔开
     -->
    <p class="blue size">第三天</p>
    <p class="blue">第四他</p>
</body>
</html>